<template>
  <view class="baike">
	  <view class="top" >
		  <view class="top-l" @click="goback">
		  	<view class="b-l">
		  	</view>
		  </view>
		  <view class="navtitle">
		  	{{name}}百科详情
		  </view>
			<image src="/static/refresh.png" mode="aspectFill" 
			style="width: 30rpx;height: 30rpx;margin-right: 30rpx;flex: none;" @click.stop="reloadWebView"></image>
	  </view>
    <!-- 使用 web-view 组件来加载百度百科页面 -->
    <web-view :src="url" v-if="!isLoading" style="margin-top: 190rpx;"></web-view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
		url:'',
		name:'',
		isLoading:false
	}
	
  },
  onLoad(options) {
  	if(options.name){
		this.name = options.name
		this.url='https://baike.baidu.com/item/'+options.name
	}
  },
  methods:{
	  goback(){
		  uni.navigateBack()
	  },
	  reloadWebView() {
		  let url=this.url
		  uni.showLoading({
		  	title:'刷新加载中...'
		  })
		  let that = this
		  this.isLoading=true
		  setTimeout(function(){
			  uni.hideLoading()
				that.url = url
				that.isLoading = false
		  },300)
	}
  }
};
</script>
 
<style scoped lang="scss">
	page{
		width: 100%;
		box-sizing: padding-box;
		overflow-x: hidden;
	}
	.baike{
		.top{
			position: fixed;
			top:0;
			left: 0;
			width: 100vw;
			z-index: 9999999999999;
			height: 190rpx;
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 800;
			.b-l{
					width: 20rpx;
					height: 20rpx;
					border: 2rpx solid #333;
					transform: rotate(-135deg);
					border-bottom: 0;
					border-left: 0;
					flex: none;
				}
				.top-l{
					position: relative;
					z-index: 9999999;
					width: 80rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.navtitle{
					text-align: center;
					flex: auto;
					margin-left: -80rpx;
				}
		}
	}
	.baike::v-deep .topbar{
		display: none !important;
	}
/* 这里可以添加样式 */
</style>